<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="app">
        <div class="houdunren" id="houdunren" data="hd">houdunren.com</div>
        <div class="hdcms">hdcms.com</div>
        <div class="xiangjun">向军大叔</div>
    </div> -->

    <div id="app">
        <span>houdunren.com</span>
        <h2>
            <span>hdcms.com</span>
        </h2>
    </div>

    <script>
        // const node = document.querySelector("#app");
        // //文本也是节点，所以node也会匹配当中
        // console.log(node.childNodes);//获取所有的子节点
        // console.log(node.firstChild);//第一个节点是文本节点
        // console.log(node.lastChild);//最后一个节点也是文本节点

        //因为app是页面上唯一的,所以可以直接使用
        // const node = app.querySelector(".hdcms");
        // // console.log(node.parentNode);//获取父节点 div#app
        // console.log(node.childNodes);//文本节点
        // console.log(node.nextSibling);//下一个兄弟节点是文本节点
        // console.log(node.previousSibling);//上一个兄弟节点也是文本节点
        // console.log(node.previousSibling.previousSibling);//上上一个兄弟节点 .houdunren

        //document是顶级节点html标签的父节点是document
        // console.log(document.documentElement.parentNode === document);

        //查找元素的父节点
        // function parentNodes(node){
        //     let nodes = [];
        //     while(node = node.parentNode){
        //         nodes.push(node)
        //     }
        //     return nodes;
        // }
        // const el = document.getElementById("houdunren");
        // const nodes = parentNodes(el);
        // console.log(nodes);


        //获取所有后代元素的span元素的内容
        // function getChildNodeByName(el,name){
        //     let items = [];
        //     for(const node of el.childNodes){
        //         if(node.nodeName === name.toUpperCase()){
        //             items.push(node);
        //         }
        //         items = [...items,...getChildNodeByName(node,name)];
        //     }
        //     return items;
        // }

        // const app = document.getElementById("app");
        // const nodes = getChildNodeByName(app,'span');
        // for (const key in nodes) {
        //    console.log(nodes[key].firstChild.nodeValue);
        // }

        


        

        


    </script>
</body>
</html>
